<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>青芽健身</title>
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="layui/layui.js"></script>
    <link href="static/css/base.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this">首页</li>
        <li>健身课程</li>
        <li>最新招聘</li>
        <li>关于我们</li>
        <li id="lay-unLogin" lay-unselect >会员登录</li>
        <li id="lay-login" lay-unselect >
            <span id="username" style="color: #1fadc5"></span>
        </li>

    </ul>
    <div class="layui-tab-content">
        <!--首页-->
        <div class="layui-tab-item layui-show">
            <div class="container">
                <!--轮播图区域-->
                <div class="layui-carousel" id="ID-carousel-demo-image">
                    <div carousel-item class="images">
<!--                        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>-->
                    </div>
                </div>

                <!--健身资讯-->
                <div>
                    <h2>最新活动</h2>
                    <hr style="height: 5px;background-color: #0ab2d2">
                    <div class="layui-timeline">
                        <!--                        <div class="layui-timeline-item">-->
                        <!--                            <i class="layui-icon layui-timeline-axis"></i>-->
                        <!--                            <div class="layui-timeline-content layui-text">-->
                        <!--                                <h3 class="layui-timeline-title">8月18日</h3>-->
                        <!--                                <p>-->
                        <!--                                    多年前，Layui 2.0 的发布前夜，记录着这样的一段心理活动。这是一个怎样的版本？它将受众如何？-->
                        <!--                                    又是谁在指引着我去创作，是基于成就感的驱动，还是试图建立我与客观世界的某种沟通-->
                        <!--                                </p>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>

                <!--健身教练信息展示-->
                <div>
                    <h2>健身教练</h2>
                    <hr style="height: 5px;background-color: #0ab2d2">
                    <div class="jl-images-container" style="background-color: white"></div>
                </div>
                <!--  留言板-->
                <div>
                    <h2>联系我们</h2>
                    <hr style="height: 5px;background-color: #0ab2d2">
                    <div class="layui-row" style="background-color: #f5f5f5">
                        <div class="layui-col-md12">
                            <form class="layui-form" lay-filter="publish-message">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea name="content" placeholder="请登录后,开始留言" lay-verify="required" lay-reqtext="请填写留言" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block layui-input-right">
                                        <button class="layui-btn" lay-submit lay-filter='message-filter'>留言</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <h3 class="about-title"></h3>
                    <p class="about-info">
                        青芽健身健康科技集团总部 <br>
                        地址：安徽省合肥市庐阳区北城大道工投创智天地x座x楼<br>
                        电话：xxx-86315666<br>
                        合作热线：18954xxx657<br>
                        全国服务热线：400808xxx6
                    </p>
                </div>
            </div>
        </div>
        <!--课程-->
        <div class="layui-tab-item">
            <div class="container">
                <h1 class="about-title">健身课程</h1>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="grid-demo grid-demo-bg1">
                            <img src="static/images/course-gl.png" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="grid-demo">
                            <h1>BODYPUMP莱美杠铃</h1>
                            <p>
                                杠铃操是杠铃和健身操进行组合的一种运动。可调节杠铃的重量适合不同年龄、性别和体质的人士。
                                杠铃操是一项比较快速的瘦身运动，它是把杠铃和健身操进行了组合，可以塑造魅力体型，可以使你身心受益的运动。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="grid-demo grid-demo-bg1">
                            <img src="static/images/course-bj.png" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="grid-demo">
                            <h1>BODYCOMBAT莱美搏击</h1>
                            <p>
                                精心设计的动作套路配以动感的音乐，将带给您前所未有的体能与精神的挑战；
                                让您随心所欲地进行体能训练，体会激情、力量和气势，不仅动作节奏性非常强，
                                而且配有背景音乐，且所选用的音乐都是国际流行乐坛的原版原唱。
                                让锻炼者在锻炼时仿佛置身于一场精彩的音乐会。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="grid-demo grid-demo-bg1">
                            <img src="static/images/course-wlmu.png" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="grid-demo">
                            <h1>BODYJAM舞林漫步</h1>
                            <p>
                                充满舞蹈文化的心血管锻炼和最棒的舞蹈课程，让每一个参与者都成为舞林高手，通过健身获得快乐，
                                在摩登的音乐声中塑造体型。您可以将自己的风格和诠释方法天衣无缝地带入每一曲音乐中，用身体展示自己的魅力和性感。
                                更重要的是，还能将您的表演水平提升到一个新的高度。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="grid-demo grid-demo-bg1">
                            <img src="static/images/course-sxph.png" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="grid-demo">
                            <h1>BODYBALANCE身心平衡</h1>
                            <p>
                                一个将传统瑜伽、太极和普拉提融合在一起的身心训练项目。配合悠扬的音乐进行集体健身训练，
                                对身体各主要肌肉群进行伸展和拉伸。依据自然法则预先设计的动作组合。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="grid-demo grid-demo-bg1">
                            <img src="static/images/course-dgdc.png" alt="">
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="grid-demo">
                            <h1>SPRING动感单车</h1>
                            <p>
                                动感单车，是一种结合了音乐、视觉效果等独特的充满活力的室内自行车训练课程。
                                动感单车在克服了室外行驶的一切缺点后，由于技术上的改进，使得这项运动在简单易学之余，
                                成为一项能够使全身得到锻炼的有氧运动。
                            </p>
                        </div>
                    </div>
                </div>
                <h3 class="about-title"></h3>
                <p class="about-info">
                    青芽健身健康科技集团总部 <br>
                    地址：安徽省合肥市庐阳区北城大道工投创智天地x座x楼<br>
                    电话：xxx-86315666<br>
                    合作热线：18954xxx657<br>
                    全国服务热线：400808xxx6
                </p>
            </div>
        </div>
        <!--最新招聘-->
        <div class="layui-tab-item">
            <div class="container">
                <h1 class="about-title">精英招募</h1>
                <div class="layui-row">
                    <div class="layui-col-md12 employ-info">
                        <div class="grid-demo">
                            <p>
                                <span>全国连锁高端健身所招前台客服（急招)</span>
                                <span>发布时间:2024-01-12</span>
                            </p>

                            <p>职位概要:</p>
                            <p>
                                <span>薪资: 面谈</span>
                                <span>工作年限: 不限</span>
                                <span>工作地点: 安徽合肥</span>
                            </p>

                            <p>
                                <span>性别: 女</span>
                                <span>工作性质: 全职</span>
                                <span>学历: 本科</span>
                            </p>

                            <p>
                                <span>年龄:25</span>
                                <span>招聘人数:25</span>
                                <span>所属部门:人事部</span>
                            </p>

                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12 employ-info">
                        <div class="grid-demo">
                            <p>
                                <span>全国连锁高端健身所招前台客服（急招)</span>
                                <span>发布时间:2024-01-12</span>
                            </p>

                            <p>职位概要:</p>
                            <p>
                                <span>薪资: 面谈</span>
                                <span>工作年限: 不限</span>
                                <span>工作地点: 安徽合肥</span>
                            </p>

                            <p>
                                <span>性别: 女</span>
                                <span>工作性质: 全职</span>
                                <span>学历: 本科</span>
                            </p>

                            <p>
                                <span>年龄:25</span>
                                <span>招聘人数:25</span>
                                <span>所属部门:人事部</span>
                            </p>

                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12 employ-info">
                        <div class="grid-demo">
                            <p>
                                <span>全国连锁高端健身所招前台客服（急招)</span>
                                <span>发布时间:2024-01-12</span>
                            </p>

                            <p>职位概要:</p>
                            <p>
                                <span>薪资: 面谈</span>
                                <span>工作年限: 不限</span>
                                <span>工作地点: 安徽合肥</span>
                            </p>

                            <p>
                                <span>性别: 女</span>
                                <span>工作性质: 全职</span>
                                <span>学历: 本科</span>
                            </p>

                            <p>
                                <span>年龄:25</span>
                                <span>招聘人数:25</span>
                                <span>所属部门:人事部</span>
                            </p>

                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12 employ-info">
                        <div class="grid-demo">
                            <p>
                                <span>全国连锁高端健身所招前台客服（急招)</span>
                                <span>发布时间:2024-01-12</span>
                            </p>

                            <p>职位概要:</p>
                            <p>
                                <span>薪资: 面谈</span>
                                <span>工作年限: 不限</span>
                                <span>工作地点: 安徽合肥</span>
                            </p>

                            <p>
                                <span>性别: 女</span>
                                <span>工作性质: 全职</span>
                                <span>学历: 本科</span>
                            </p>

                            <p>
                                <span>年龄:25</span>
                                <span>招聘人数:25</span>
                                <span>所属部门:人事部</span>
                            </p>

                        </div>
                    </div>
                </div>
                <h3 class="about-title"></h3>
                <p class="about-info">
                    青芽健身健康科技集团总部 <br>
                    地址：安徽省合肥市庐阳区北城大道工投创智天地x座x楼<br>
                    电话：xxx-86315666<br>
                    合作热线：18954xxx657<br>
                    全国服务热线：400808xxx6
                </p>
            </div>
        </div>
        <!--关于我们-->
        <div class="layui-tab-item">
            <!-- 文本内容  start here-->
            <div class="container about-title-container col-sm-12">
                <h3 class="about-title">企业简介</h3>
                <p class="about-info">
                    sport健身俱乐部现已发展成为国内著名的健身连锁品牌之一。作为上海本地成长起来的优秀品牌，sport健身俱乐部健身时刻以海纳百川的胸怀面向社会；以强烈的责任感回馈社会；以引领全民健身的旗手标准来要求自己，为业内做出表率。目前，sport健身俱乐部已为社会创造了大量就业岗位、累积服务超过100万会员、每天服务人次超过50000次。</p>
                <p>
                    sport健身俱乐部健身管理有限公司目前有员工3000多人，拥有超过一百家健身会所。公司大力倡导绿色环保和时尚健身运动。凭借先进的管理理念、丰富的行业经验、完善的管理体系和管理团队，业已成为业内发展速度快、分店数量多、会员数量众多的健身连锁机构。公司多次通过权威机构认证，目前由国际著名投资公司——新加坡淡马锡集团注资，2015年更是获得了上海市著名商标，是健身行业内首个获得该荣誉的企业。公司希望通过全体员工的努力为社会提供有价值的健康生活服务，成为具世界竞争力的连锁健身企业之一。公司将打造更多的绿色生态会馆、为美好的城市生活贡献更多力量。</p>
                <p class="about-info">完善商业业态、打造“一站式”休闲服务</p>
                <p class="about-info"> 1. 作为上海本土成长起来的健身连锁运营商，sport健身俱乐部在上海商业中心的服务功能完善中，扮演了极为重要的角色。2007年4月龙之梦中山公园会所开业，
                    sport健身俱乐部的强大品牌号召力很快为该商圈聚集了大量人气，新颖的课程、激情四射的运动、专业的跑步机等健身器材----无不为商圈内的白领带来了完美的运动享受！会所也让龙之梦购物中心成为名副其实的休闲、商务、健身一站式购物天堂。</p>
                <p class="about-info"> 2. 与百联集团强强联手，则将
                    sport健身俱乐部的“一站式”休闲服务理念展现到极至：百联五角场又一城会所、西郊百联会所等相继成为大型商业中心不可或缺的功能组成部分。</p>
                <p class="about-info"> 3. 淮海中路会所、南京西路会所等相继成为区域CBD的合作亮点。为区域内商务精英及白领带去了健身运动的便利。2007年底，
                    sport健身俱乐部黄浦城市会所盛大开业，上海外滩CBD核心区域树立起全新的地标式建筑。会所占地3万余平米、综合了游泳、健身、篮球、网球等，几乎囊括了所有运动项目，颠覆了传统“健身房”的概念，成为了大型一站式休闲娱乐运动天地。也为众多白领、企业家在公司与家以外构筑了健康生活的第三个支点。</p>
                <p class="about-info">成就完美社区、构建和谐家园</p>
                <p class="about-info">
                    sport健身俱乐部作为著名的健身会所运营商，已经成功成为诸多房地产开发商在楼盘配套健身会所品牌上的不二选择。sport健身俱乐部的国际化管理经验、优质的硬件设施、温馨周到的服务都为业主带来了舒适便捷的健身服务享受。</p>
                <h3 class="about-title"></h3>
                <p class="about-info">
                    青芽健身健康科技集团总部 <br>
                    地址：安徽省合肥市庐阳区北城大道工投创智天地x座x楼<br>
                    电话：xxx-86315666<br>
                    合作热线：18954xxx657<br>
                    全国服务热线：400808xxx6
                </p>
            </div>
            <!-- 文本内容  end here-->
        </div>
    </div>
</div>
<script>
    layui.use(function () {
        let carousel = layui.carousel,
            layer = layui.layer,
            form = layui.form,
            $ = layui.$;

        // 用户没有登录隐藏登录选项
        if (sessionStorage.getItem("username")) {
            $("#lay-unLogin").css('display', "none")
            $("#username").text("欢迎您:"+sessionStorage.getItem("username"))
        } else {
            $("#lay-login").css('display', "none")
        }


        // 轮播区域图片动态渲染
        let host = "http://localhost:8080/sport/slide/getSlidePicture?uuid="
        //  发送异步请求  从后台服务器中获取轮播的图片  图片的地址
        $.get('/sport/slide/list',function (res){
            if (res.code==0){
                let carouselImages = res.data;  // [{},{}]
                let $images = $(".images");
                carouselImages.forEach(img => {
                    let divChild = $("<div></div>").append($("<img>").attr("src", host+img.uuid));
                    $images.append(divChild)
                })
                // 渲染 - 图片轮播
                carousel.render({
                    elem: '#ID-carousel-demo-image',
                    width: '100%',
                    height: '100%',
                    interval: 3000,
                    indicator: "none"
                });
            }
        })

        //  发送异步请求  获取最新活动    list   -> []  -> timeMessages
        $.get("/sport/active/list",function (res){
            if (res.code==0){
                console.log(JSON.stringify(res.data))
                // 动态渲染健身资讯
                let timeMessages =  res.data  // []

                let $timeline = $(".layui-timeline");
                timeMessages.forEach(timeMessage => {

                    let $icon = $("<i class='layui-icon  layui-timeline-axis '></i>");
                    let info = $("<p></p>").html(timeMessage.content);
                    let time = $("<h3></h3>").addClass('layui-timeline-title').html(timeMessage.updateTime);
                    let timeInfo = $("<div class='layui-timeline-content layui-text'></div>").append(time).append(info);

                    let $timeInfoIcon = $("<div></div>").addClass("layui-timeline-item").append($icon).append(timeInfo);
                    $timeline.append($timeInfoIcon)
                })

            }
        })

        // 健身教练图片信息动态渲染
        let jlImages = [, 'static/images/jl2.png', 'static/images/jl6.png', "static/images/jl2.png", 'static/images/jl6.png', "static/images/jl3.png", "static/images/jl4.png", "static/images/jl5.png", "static/images/jl3.png"]
        let $jl = $(".jl-images-container");
        jlImages.forEach(jlImage => {
            let divChild = $("<div></div>").addClass('jl-images-item').append($("<img>").attr("src", jlImage));
            $jl.append(divChild)
        })


        //  会员登录
        $("#lay-unLogin").on('click',function (){
            // 弹出登录窗口
            let index = layer.open({
                type: 2, // page 层类型，其他类型详见「基础属性」
                title:'会员操作',
                area: ['350px', '400px'],
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: 'member-login.html',
                end: function(){
                   window.location.reload()
                }
            });
        })


        //监听留言
        form.on("submit(message-filter)",function (obj){
            let formData  = obj.field;
            if (sessionStorage.getItem("username")){
                // 发送异步请求
                layer.msg("发布留言")
                $.post("/sport/message/publish",formData,function (res){
                    if (res.code==0){
                        layer.msg(res.msg,{icon:1},function (){
                            form.val("publish-message",{
                                content:""
                            })
                            form.render();
                        })
                    }else{
                        layer.msg(res.msg,{icon:2})
                    }
                })
            }else{
                layer.msg("请登录后留言")
            }

            return false;
        })
    });
</script>
</body>
</html>